<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item v-bind="formItemLayout" label="字典类型">
      <a-input
        v-decorator="[
          'dictKey',
          {
            rules: [
              {
                required: true,
                message: '请输入字典类型key，必须是唯一的!'
              }
            ]
          }
        ]"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="字典类型名称">
      <a-input
        v-decorator="[
          'dictValue',
          {
            rules: [
              {
                required: true,
                message: '请输入字典类型名称!'
              }
            ]
          }
        ]"
      />
    </a-form-item>

    <a-form-item
      :wrapper-col="{
        xs: { span: 24, offset: 0 },
        sm: { span: 16, offset: 8 }
      }"
    >
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
      <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
        Clear
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  name: "StaffList",
  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      }
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          this.$services.user.staffList({
            method: "post",
            data: values
          });
        }
      });
    },

    handleReset() {
      this.form.resetFields();
    }
  }
};
</script>

<style scoped></style>
